<template>
  <div class="search-singer">
    <div class="tip">找到{{ searchSingerCount }}个歌单</div>
    <list-card
      :listCardData="searchSingerList"
      @clickListCardItem="clickListCartItem"
    ></list-card>
    <!--    分页-->
    <div class="page" v-if="searchSingerList.length!==0">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="searchSingerCount"
        small
        :page-size="30"
        :current-page="currentPage"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>

</template>

<script>
import ListCard from "../../../../components/ListCard/ListCard";

export default {
  name: "searchSinger",
  data() {
    return {
      //  搜索歌曲歌手总数
      searchSingerCount: 0,
      //  搜索歌曲歌手列表
      searchSingerList: [],
      //  分页-当前页
      currentPage: 1
    }
  },
  methods: {
    //点击歌曲歌手回调
    clickListCartItem(id) {
      this.$router.push({ name: "singerDetail", params: { id } });

    },
    //  分页点击回调
    pageChange(page) {
      //点击页获取
      this.currentPage = page;
      //获取点击页切换时，清空原有数据
      this.searchSingerList = [];
      //再次获取
      this.GetSearchSingerList();
    },
    //  获取歌曲歌手列表
    async GetSearchSingerList() {
      /*
      可选参数 : limit : 返回数量 , 默认为 30 offset : 偏移数量，用于分页 , 如 : 如 :( 页数 -1)*30,
      其中 30 为 limit 的值 , 默认为 0
      type: 搜索类型；默认为 1 即单曲 ,
      取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV,
      1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合
      */
      let res = await this.$request('/cloudsearch', {
        keywords: this.$route.params.id,
        offset: (this.currentPage - 1) * 30,
        type: 100
      })
      //歌单总数
      this.searchSingerCount = res.data.result.artistCount;
      //歌单列表
      this.searchSingerList = res.data.result.artists
    }
  },
  created() {
    this.GetSearchSingerList()
  },
//  注册组件
  components:{
    ListCard,
  }
}
</script>

<style scoped lang="less">
.search-singer {
  max-width: 1000px;
  margin: auto;

  .tip {
    text-align: left;
    font-weight: bold;
    color: rgb(34, 34, 34);
    margin-bottom: 10px;
  }

  .page {
    width: 100%;
    font-weight: bold;
    text-align: center;
    padding-bottom: 20px;
    margin: 20px 0;
  }
}

</style>
